<template>
  <div class="checking-container">
    <van-nav-bar title="检查信息" @click-right="onClickRight">
      <!-- <template #right>
        <van-icon name="share-o" size="22" color="#ffffff" />
      </template> -->
      <!-- 无需输入姓名验证版本2407 -->
    </van-nav-bar>
    <div class="checking-content">
      <div class="title">检查信息</div>
      <div class="name">检查号：{{detail && detail.checkNo}}</div>
     <div class="name">姓名:{{detail && detail.name}}</div>
      <div class="text">检查医院：{{detail && detail.hospitalName}}</div>
      <!-- <div class="text">电话：{{detail && detail.mobile}}</div> -->
      <div class="line"></div>
      <div class="checking-button-group">
        <div class="button-group" @click="report">
          <div class="button-icon"><van-icon name="column" /></div>
          <div class="button-text">电子报告</div>
        </div>
        <div class="button-group" @click="film">
          <div class="button-icon"><van-icon name="photograph" /></div>
          <div class="button-text">电子胶片</div>
        </div>
      </div>
    </div>
    <div class="login-button-group" @click="login" style="display:none">
        <van-icon size="40px" name="contact" color="#ffffff" />
        <div class="login-button-user">
          <div class="login-button-user-name">关联本次检查</div> 
          <div class="login-button-user-info">将本次检查关联到自己的账号下</div>
        </div>
        <van-icon size="40px" name="arrow" color="#ffffff" />
      </div>
      <van-overlay :show="show" @click="show = false">
        <div class="wrapper" @click.stop>
          <div class="text text-center">分享二维码时效15分钟</div>
          <div>
            <img src="" alt="">
          </div>
          <div class="text">请二维码涉及隐私请注意保管</div>
        </div>
      </van-overlay>
      <van-overlay :show="nameShow">
        <div class="show-input-group">
          <div class="text text-center">姓名验证</div>
          <div class="input-name">
            <!-- <div class="input-name-box"  >
              <input v-model="nameArr" type="text" class="input-name-input"  >
            </div> -->
            <!-- v-if="index>0" -->
            <!-- <div class="input-name-box" v-for="(item,index) in nameArr" :key="index" >
              <div class="input-name-text">{{item}}</div>
            </div> -->
              <div class="input-name-box" >
              <div class="input-name-text" style="width:100px;">{{nameArr}}</div>
            </div>
          </div>
          <div style="padding-top:20px;">
            <van-button type="info" block round @click="submit">验证</van-button>
          </div>
        </div>
      </van-overlay>
  </div>
</template>
<script>
import {Icon,Overlay,Toast,NavBar,Button} from 'vant';
import _ from 'lodash';
export default {
  name: "checking",
  components:{[Icon.name]: Icon,[NavBar.name]:NavBar,[Overlay.name]:Overlay,[Button.name]:Button},
  data() {
    return {
      show: false,
      nameShow: false,
      agePassword:'',
      names:'',
      detail:null,
      details:null,
      nameArr:[],
      zid:'',
      token:'',
      totime:'',
      checkno:'',
      hoscode:'',
      checkdate:'',
    };
  },
  mounted(){
    this.zid=this.$route.query.zid || 1;
    this.checkno=this.$route.query.checkno || "";
    this.hoscode=this.$route.query.hoscode || "";
    this.checkdate=this.$route.query.checkdate || "";
  
    this.initMethod();
  },
  methods: {
    onClickRight(){
      this.show=true;
    },
    report(){
      let isCheckName=window.sessionStorage.getItem('userName');
      if(isCheckName){
         this.$router.push({path:'/mobile/report',query:{zid:this.zid,checkno:this.checkno,hoscode:this.hoscode,checkdate:this.checkdate}});
      }
     
    },
    film(){

      //  this.details
  // this.$router.push({ path: '/mobile/admin/image', query: { id: data.id,expires: data.expires,
  //       signature: data.signature,serverAddr: data.serverAddr
  //       } })
    console.log("111",this.details);
      let isCheckName=window.sessionStorage.getItem('userName');
      if(isCheckName){
             this.$router.push({path:'/mobile/film',query:{zid:this.zid,expires: this.details.expires,
        signature: this.details.signature,serverAddr: this.details.serverAddr}});
      }

 
    },
    login(){
      this.$router.push('/mobile/login');
    },
    initMethod(){
      Toast.loading({ message: "加载中...", forbidClick: true });
      // old  {zid:this.zid,checkno:this.checkno,hoscode:this.hoscode,checkdate:this.checkdate}
      let para={checkNo:this.checkno,hospitalId:this.hoscode,checkdate:this.checkdate,edtime:this.edtime,type:this.type};
      
      // totime
      this.$http
        .get(this.$API.QUERY_CHECK_SEARCHv2,para)
        .then((res) => {
          Toast.clear();
          if(res.code == 200){
            if(_.isString(res.data.name)){
              let arr=[];
              for(let i of res.data.name){
                arr.push(i)
              }
               this.nameArr=res.data.name;
                this.names=res.data.name;
              // this.nameArr=arr;// 拆分
              // window.sessionStorage.setItem('userName',this.names)
              let isCheckName=window.sessionStorage.getItem('userName');
             
              console.log("jiekou",isCheckName)
              if(isCheckName && _.isString(isCheckName)){
                this.detail=res.data;
                this.details=res.data;
                this.nameShow=false;
                return;
              }
              this.nameShow=true;
            }
           
          }else{
            return Toast.fail(res.msg)
          }
      })
    },
    submit(){
      // console.log(this.nameArr);return;
      // if(this.names!=this.nameArr[0]) return Toast.fail('验证失败')
       if(this.names!=this.nameArr) return Toast.fail('验证失败')
      // this.nameShow=false;
      // this.detail=this.details;
      window.sessionStorage.setItem('userName',this.names)
      this.initMethod();
    },
  },
};
</script>
<style lang="less" scoped>
.checking-container{
  width: 100%;
  height: 100%;
  background:linear-gradient(to top, #9fe1fa, #f4edc9);
  .checking-content{
    border-radius: 6px;
    background: #ffffff;
    width: calc(100% - 20px);
    margin:0 auto;
    padding:20px;
    margin-top:20px;
  }
  .line{
    border-top:1px solid #eee;
    height: 1px;
    width:100%;
    margin-top:20px;
  }
  .title{
    font-size: 16px;
    color:#333;
    text-align: center;
  }
  .name{
    font-size: 16px;
    color:#333;
    line-height: 22px;
  }
  .text{
    font-size: 14px;
    color:#333;
    line-height: 22px;
  }
  .checking-button-group{
    padding:20px 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .button-group{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .button-text{
    padding:4px;
    font-size: 14px;
    color:#333;
  }
  .button-icon{
    width:40px;
    height: 40px;
    background: #1989fa;
    color:#fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 30px;
  }
  .login-button-group{
    height: 60px;
    background-image: linear-gradient(110.6deg, rgb(179, 157, 219) 7%, rgb(150, 159, 222) 47.7%, rgb(24, 255, 255) 100.6%);
    display: flex;
    align-items: center;
    padding:0 20px;
    border-radius: 8px;
    width: calc(100% - 20px);
    margin:20px auto 0  auto;
  }
  .login-button-user{
    padding:0 20px;
    flex:1;
  }
  .login-button-user-name{
    font-size: 16px;
    color:#fff;
    line-height: 20px;
  }
  .login-button-user-info{
    font-size: 14px;
    color:#fff;
    line-height: 20px;
  }
  .wrapper{
    width: 60%;
    padding:20px;
    background: #fff;
    position: absolute;
    top:50%;
    left:50%;
    border-radius: 6px;
    transform: translate(-50%,-50%);
  }
  .text{
    font-size: 14px;
    color:#333;
  }
  .text-center{
    text-align: center;
  }
  .show-input-group{
    width: 70%;
    background: #fff;
    border-radius: 6px;
    padding:20px;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
  }
  .input-name{
    display: flex;
    align-items: center;
    justify-content: center;
    padding:20px 0;
  }
  .input-name-box{
    padding:0 7px;
    font-size: 0;
  }
   .input-name-input{
    width: 40px;
    height: 40px;
    border:1px solid #eee;
    font-size: 18px;
    color:#333;
    line-height: 40px;
    text-align: center;
    outline: none;
   }
   .input-name-text{
    width: 40px;
    height: 40px;
    font-size: 18px;
    color:#333;
    display: flex;
    align-items: center;
    justify-content: center;
   }
}
</style>
<style>
  .checking-container .van-nav-bar{
    background-color: #1989fa;
  }
  .checking-container .van-nav-bar__title{
    color:#ffffff;
  }
</style>


